<template>
    <view class="bg">
        <!-- 顶部 -->
        <view class="top">
            <img src="../../static/search.png" alt="" class="search">
            <input type="text" placeholder="搜索我的订单">
        </view>
        <!-- 选项栏 -->
        <view class="option-container">
            <view v-for="item in tabsdata" :key="item.index" class="tabitem"
                :class="{ 'highlight-color': selectedIndex === item.index}" @click="toggleColor(item.index)">
                {{item.name}}
            </view>
        </view>
        <!-- 订单展示 -->
        <view class="show" v-for="(item, index) in data" :key="index">
            <text class="travelname">{{item.name}} ></text>
            <text class="orderstate">{{item.state ? '已完成':'未使用'}}</text><br>
            <img :src="`${IMG_URL}${item.img}`" class="pictrue">
            <view class="text-container">
                <text class="text-content">{{item.description}}</text>
            </view>
            <text class="totalprice">￥{{item.totalprice}}</text>
            <text class="num">×{{item.number}}</text>
            <button class="finish" @click="finish(item.orderlId)" v-if="item.state? false: true">确认完成</button>
            <button class="detail" @click="showDetail(item.orderlId)">查看详情</button>
        </view>
        <view v-if="isLoading" class="loading">正在加载...</view>
        <view v-if="noMoreData" class="no-more-data">没有更多数据</view>
    </view>
</template>

<script setup>
    import {
        reactive,
        ref
    } from 'vue'
    import {
        http
    } from '../../http.js'
    import {
        IMG_URL
    } from "@/utils/imgStatic"
    import {
        userStore
    } from '../../store/userstore.js'
    import {
        onLoad,
        onReachBottom,
        onPullDownRefresh
    } from '@dcloudio/uni-app'

    const store = userStore()
    const selectedIndex = ref(0)
    // 顶部tabs数据  
    const tabsdata = reactive([{
            index: 0,
            name: '全部'
        },
        {
            index: 1,
            name: '未使用',
        },
        {
            index: 2,
            name: '已完成'
        }
    ]);

    const toggleColor = (index) => {
        selectedIndex.value = index
        console.log(index, 'suoyin');
        if (index == 0) {
            console.log('获取全部');
            getOrder()
        } else {
            (async () => {
                const res = await http({
                    url: 'http://localhost:3000/order/getOderByState',
                    method: "POST",
                    data: {
                        userId: store.userId,
                        state: index - 1
                    }
                })
                if (res.code == 200 && res.msg == 'success') {
                    data.length = 0
                    for (let i = 0; i < res.data.length; i++) {
                        data.unshift(res.data[i])
                    }
                    console.log(data, 'suoyinindex')
                }
            })()
        }
    }

    const data = reactive([])
    const getOrder = async () => {
        const res = await http({
            url: 'http://localhost:3000/order/getOderById',
            method: "POST",
            data: {
                userId: store.userId,
            }
        })
        if (res.code == 200 && res.msg == 'success') {
            data.length = 0
            for (let i = 0; i < res.data.length; i++) {
                data.unshift(res.data[i])
            }
            console.log(data, '55555')
        } else {

        }
    }
    onLoad(()=>{
        getOrder()
    })
    // 修改订单状态
    const finish = async (item) => {
        const res = await http({
            url: 'http://localhost:3000/order/updateOrder',
            method: "POST",
            data: {
                orderlId: item,
                state:1
            }
        })
        if (res.code == 200 && res.msg == 'success') {
            console.log('更新成功');
        }
    }
    // 查看详情
    const showDetail = async (item) => {
        store.detailorderlId = item
        uni.navigateTo({
            url: '/pages/order/detail'
        })
    }
</script>

<style scoped>
	.loading {
		text-align: center;
		padding: 20px;
		color: #999;
	}
	.no-more-data {
		text-align: center;
		padding: 20px;
		color: #999;
	}
	.bg {
		background-color: #f1f1f1;
		width: 100%;
		height: 100%;
	}

	.highlight-color {
		position: relative;
	}

	.highlight-color::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 50px;
		height: 2px;
		/* 设置你希望的颜色条的高度 */
		background-color: #1E90FF;
		/* 设置你希望的颜色 */
	}

	.option-container {
		background-color: white;
		height: 30px;
		margin-top: 10px;
	}

	.tabitem {
		display: inline-block;
		margin-right: 50px;
		padding-top: 3px;
		text-align: center;
		margin-left: 5px;
	}

	.bg {
		background-color: #F5F5F5;
	}

	.top {
		border-radius: 25px;
		background-color: white;
		width: 270px;
		margin-left: 30px;
		height: 30px;
		font-size: 15px;
		display: inline-block;
		margin-top: 5px;
	}

	.top>input {
		border-radius: 25px;
		background-color: white;
		width: 245px;
		height: 30px;
		font-size: 15px;
		display: inline-block;
	}

	.search {
		width: 25px;
		height: 25px;
		display: inline-block;
		margin-bottom: 3px;
	}

	.show {
		width: 360px;
		margin: 10px 15px;
		background-color: white;
		position: relative;
		height: 180px;
	}

	.pictrue {
		width: 100px;
		height: 100px;
		border-radius: 10px;
		margin-left: 10px
	}

	.show>text {
		display: inline-block;
	}

	.travelname {
		font-weight: bold;
		font-size: 16px;
		margin: 10px;
	}

	.orderstate {
		font-size: 13px;
		position: absolute;
		left: 310px;
		margin-top: 11px;
		color: #1E90FF;
	}

	.totalprice {
		position: absolute;
		top: 60px;
		right: 15px;
		font-size: 13px;
		font-weight: bold;
	}

	.num {
		position: absolute;
		top: 80px;
		right: 15px;
		font-size: 13px;
		font-weight: bold;
	}

	.detail {
		position: absolute;
		bottom: 3px;
		right: 3px;
		width: 80px;
		height: 30px;
		font-size: 13px;
		border-radius: 25px;
		background-color: #1E90FF;
		color: white;
	}
	.finish{
		position: absolute;
		bottom: 3px;
		right: 100px;
		width: 85px;
		height: 30px;
		font-size: 13px;
		border-radius: 25px;
		background-color: white;
		color: black;
		border: 1px solid black;
	}

	.text-container {
		width: 180px;
		/* 设置固定宽度 */
		height: 85px;
		/* 设置固定高度 */

		overflow: hidden;
		/* 隐藏超出部分 */
		text-overflow: ellipsis;
		position: absolute;
		top:45px;
		left:115px
	}

	.text-content {
		width: 100%;
		/* 继承父容器的宽度 */
	}
</style>
